<template>
    <div class="view">
        <android-nav-bar :title="detail.title || '消息详情'" v-on:back="back"></android-nav-bar>
        <div class="articles-box">
            <cube-scroll class="scroll" ref="scroll" :scroll-events="['scroll-end']" @scroll-end="scrollEnd">
                <div class="title">
                    {{detail.title}}
                </div>
                <div class="other-box">
                    <span class="time rt">{{detail.create_time | timeStampToDay}}</span>
                </div>
                <div class="content" v-html="detail.content"></div>
                <div class="scroll-safe-area-bottom"></div>
            </cube-scroll>
        </div>

    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";

    @Component({
        components: {
            AndroidNavBar
        }
    })
    export default class LoveArticle extends Scene {
        private publicPath: string = process.env.BASE_URL;
        private detail: any = {};
        @State("UserStore")
        public user!: InterfaceUser;

        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private scrollEnd(): void {
            (<any> this).$refs.scroll.refresh();
        }

        private getArticles(): void {
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "加载中..."
            }).show();
            Http.get(this.api.messageDetail, {id: this.$route.query.id},{token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    loadToast.hide();
                    this.detail = res.data;
                    Http.post(this.api.setMessageRead, {id:this.$route.query.viewId,status:1},{token: this.user.token}).then((res)=>{
                        if(res.code==1){
                            console.log('22');
                        }
                    });
                } else {
                    loadToast = (<any> this).$createToast({
                        time: 2500,
                        type: "error",
                        mask: true,
                        txt: `${res.msg}`,
                        onTimeout: () => {
                            this.navigateBack();
                        }
                    }).show();
                }
            }).catch((res) => {
                loadToast.hide();
                console.log(res);
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });
        }

        private created(): void {
            this.getArticles();
        }


    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;
        overflow hidden;

        .articles-box
            margin-top calc(47px + var(--safe-area-inset-top));
            height calc(100vh - 47px - var(--safe-area-inset-top));
            position right;

            &::before
                display table;
                content '';

            .scroll
                background-color #fff;
                height calc(100vh - var(--safe-area-inset-top) - 47px);
                padding-bottom calc(20px + var(--safe-area-inset-bottom));

                .title
                    font-size 16px;
                    font-weight 600;
                    padding 30px 10px 15px 10px;
                    text-indent 2em;
                    line-height 1.3em;
                    text-align center

                .remark
                    font-size 13px;
                    color #333;
                    padding 10px 12px;

                    &::before
                        content '摘要：'

                //text-align center;

                .other-box
                    color $theme-viceColor-font;
                    padding 15px;

                .img-show
                    width 94vw;
                    height 220px;
                    margin 0 auto;

                    img
                        width 100%;
                        height 100%;
                        border-radius 10px;

                .content
                    padding 15px 3vw;
                    padding-bottom 50px;
                    line-height 1.3em;

                    >>> *
                        width 94vw !important;

                    >>> div
                        width 94vw !important;

                    >>> p
                        width 94vw !important;

                    >>> img
                        display block;
                        width 94vw !important;
                        //height 220px !important;
                        margin 0 auto;


</style>

